<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="展会名录" back></Header>
		<view class="wapper">
			<div class="header">
				<view class="header-item">
					<div class="uni-flex">
						展商名称：
						<input class="uni-input" style="text-align: left;" placeholder="请输入展商名称" clearable
							v-model="searchParams.ZhanShangName" @confirm="search"></input>
					</div>
				</view>
				<view class="header-item">
					<picker mode="selector" :range="mapList" range-key="ZhanquName" @change="changeType"
						:value="typeIndex">
						<div class="uni-flex">
							展区：
							<view class="uni-input">{{mapList[typeIndex].ZhanquName}}
							</view>
						</div>
					</picker>
					<view class="picker-tip">
						<image src="../../static/icons/arrow.png" mode=""></image>
					</view>
				</view>
				<view class="header-item">
					<div class="uni-flex">
						展位：
						<input class="uni-input" style="text-align: left;" placeholder="请输入展商名称" clearable
							v-model="searchParams.Seat" @confirm="search"></input>
					</div>

				</view>
			</div>
			<view class="stores">
				<view class="stores_list_half" v-for="(s,j) in computedList">
					<view class="stores_list">
						<view class="stores_item" v-for="(v,k) in s.list" :key="k" @click="toDetail(v)">
							<view class="stores_item_top">
								<image :src="getUrl(v.ImageUrl)"></image>
							</view>
							<view class="stores_item_bottom">
								<view class="stores_item_bottom_left">
									<view class="stores_item_bottom_left_top">
										{{v.ZhangShangName}}
									</view>
									<view class="stores_item_bottom_left_center">
										{{v.ZhangShangSeat}}
									</view>
									<!-- 	<view class="stores_item_bottom_left_bottom">
									<view class="stores_item_bottom_left_bottom_place">
										{{v.ZhangShangSeat}}
									</view>
									<view class="stores_item_bottom_left_bottom_num">
										{{v.ZhangShangID}}
									</view>
								</view> -->
								</view>
								<!-- <view class="stores_item_bottom_right">
								<image src="@/static/icons/collect.png" mode="widthFix"></image>
							</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				searchParams: {
					ZhanShangName: '',
					PageSize: 9999,
					PageIndex: 1,
					"ZhanQuID": "",
					"Seat": ""
				},
				mapList: [],
				typeIndex: 0,
				list: []
			}
		},
		onLoad(e) {
			if (e.data) {
				this.searchParams.ZhanQuID = e.data
			}
		},
		computed:{
			computedList(){
				let arr1 = []
				let arr2 = []
				for(let i = 0;i<this.list.length;i++){
					if(i % 2 == 0){
						arr1.push(this.list[i])
					}else{
						arr2.push(this.list[i])
					}
				}
				return [
					{list:arr1},
					{list:arr2},
				] 
			}
		},
		methods: {
			changeType(v) {
				this.typeIndex = v.detail.value
				this.searchParams.ZhanQuID = this.typeIndex == 0 ? '' : this.mapList[this.typeIndex].ZhanquID
				this.search()
			},
			toDetail(v) {
				uni.navigateTo({
					url: './company?data=' + encodeURIComponent(JSON.stringify({
						ZhangShangID: v.ZhangShangID
					}))
				})
			},
			async search() {
				let res = await this.$api.getNavs6(this.searchParams)
				this.list = res.UserData
			},
			async init() {
				let res = await this.$api.getIndex()
				this.mapList = res.UserData.HomePageZhanquList
				this.mapList.unshift({
					ZhanquID: 0,
					ZhanquName: '全部'
				})
				if (this.searchParams.ZhanQuID) {
					this.typeIndex = this.mapList.findIndex((v) => v.ZhanquID == this.searchParams.ZhanQuID)
				}
			}
		},
		async mounted() {
			this.init()
			this.search()
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			padding: 20rpx;
			z-index: 100;
			margin-top: -280rpx;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;


			.header {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
				// flex-wrap: wrap;

				.header-item {
					width: 100%;
					height: 40rpx;
					flex: 1;
					text-align: center;
					margin-right: 20rpx;
					border: 1px solid #dcdcfc;
					padding: 20rpx;
					border-radius: 10rpx;
					background: #fff;
					position: relative;
					font-size: 28rpx;

					.picker-tip {
						position: absolute;
						right: 20rpx;
						top: 50%;
						transform: translateY(-50%);

						image {
							width: 20rpx;
							height: 14rpx;
						}
					}
				}
			}

			.stores {
				margin: 40rpx auto;
				display: flex;
				.stores_list {
					display: flex;
					flex-wrap: wrap;

					.stores_list_half {
						height: 100%;
					}

					.stores_item {
						padding: 26rpx 22rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.35);
						border-radius: 33rpx;
						width: 300rpx;
						margin-right: 19rpx;
						margin-bottom: 19rpx;

						&:nth-child(2n) {
							margin-right: 0;
						}

						.stores_item_top {
							padding: 20rpx 0;

							image {
								width: 100%;
								height: 200rpx;
							}

							border-bottom: 1px solid #000000;
							;
						}

						.stores_item_bottom {
							margin-top: 20rpx;

							.stores_item_bottom_left {
								letter-spacing: 4rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.stores_item_bottom_left_top {
									font-size: 32rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
								}

								.stores_item_bottom_left_center {
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
								}

								.stores_item_bottom_left_bottom {
									display: flex;

									.stores_item_bottom_left_bottom_place {
										margin-right: 32rpx;
										font-size: 24rpx;
										font-family: Source Han Sans CN;
										font-weight: 500;
										color: #333333;
									}

									.stores_item_bottom_left_bottom_num {
										font-size: 24rpx;
										font-family: Source Han Sans CN;
										font-weight: 500;
										color: #333333;
									}
								}
							}

							.stores_item_bottom_right {
								image {
									width: 36rpx;
									height: 36rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>